<template>
  <div>
    <v-chart ref="vchart" class="chart" :style="height" :option="option" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { use } from "echarts/core";
import { BarChart, LineChart } from "echarts/charts";
import VChart from "vue-echarts";
import { TooltipComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([TooltipComponent, GridComponent, BarChart, LineChart, CanvasRenderer]);

const props = defineProps(["height"]);
const { height } = props;
let option = ref({});
const initEcharts = (chartData) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    grid: {
      x: 30,
      y: 30,
      x2: 30,
      y2: 30,
    },
    xAxis: [
      {
        type: "category",
        data: chartData.date,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          },
        },
        data: chartData.total,
      },
      {
        name: "",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          },
        },
        data: chartData.totalMoney,
      },
    ],
  };
};

const vchart = ref(null);
defineExpose({ vchart, initEcharts });
</script>

<style lang="less"></style>
